import Vue from "vue";
import VueRouter from "vue-router";


Vue.use(VueRouter);
// 路由 根据不同的路径加载不同的组件
// 配置的核心就是使用一个路径映射一个组件
// 配置路由的步骤
// 1.创建页面组件
// 2.引入 并且配置routes 懒加载的方式引入路由组件，路由懒加载,使用的是代码切割的方式
// 3.编写视口组件router-view 、router-link 导航组件，可以改变浏览器的地址
const routes = [
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
   /*  {
      path:"/discover",
      component:()=>import("../page/Page404")
    }, */
    // 匹配优先级， 有时候同一个路径可以对应不同的组件，谁先定义就优先匹配谁
    {
      path:"/discover",
      component:() => import(/*webpackckChunkName:'discover' */ "../page/Discover"),
      // 嵌套路由：
      children:[
        {
          name:"dj",//具名路由
          path:"djradio",//多级的路由，里面的path不要加"/"
          component:()=>import(/*webpackckChunkName:'djradio' */ "../page/Discover/Djradio")
        },
        {
          name:"tp",
          path:"toplist",
          component:()=>import(/*webpackckChunkName:'djradio' */ "../page/Discover/Toplist")
        }
      ]
    },
    // 多视口（router-view）使用一个路径可以对应多个组件
    {
      path:"/friend",
      components:{
        "putong":()=>import(/*webpackckChunkName:'putong' */ "../page/Friend"),
        "god":()=>import(/*webpackckChunkName:'god' */ "../page/Other"),
        // 默认展示：default:
        // default:()=>import(/*webpackckChunkName:'putong' */ "../page/Friend"),
      }
    },
    {
      name:'pl',
      path:"/playlist",//playlist/:id===>:id动态参数
      component:() => import(/*webpackckChunkName:'playlist' */ "../page/Playlist")
    },
    {
      path:"/list",
      component:() => import(/*webpackckChunkName:'list' */ "../page/List")
    },
    {
      path:"/detail/:productid",
      props:true,//动态路由参数解耦
      component:() => import(/*webpackckChunkName:'detail' */ "../page/Detail")
    },
    // 404页面
    {
      path:"*",
      component:() => import(/*webpackckChunkName:'page404' */ "../page/Page404")
    },
    {
      path:"/vuex",
      component:( ) => import(/*webpackckChunkName:'vuex' */ "../page/vuexPage")
    },
    {
      path:"/",
      redirect: "/vuexTwo"//重定位，让页面打开不是404，是发现的页面
    } ,
    {
      path:"/vuexTwo",
      component:()=> import(/*webpackckChunkName:'vuexTwo' */ "../page/vuexPage2")
    }
];

const router = new VueRouter({
  routes,
});

export default router;
